<template>
    <el-steps :active="stepActive" finish-status="success" align-center process-status="finish" :direction="direction">
        <el-step v-for="(flowStep,index) in flowStepList" :key="index" :title="flowStep.state_name">
            <template slot="description" v-if="flowStep.state_flow_log_list.length>0">
                <div v-for="item in flowStep.state_flow_log_list" class="step-item">
                    <div>
                    {{item.participant_info.participant_alias+ " " +
                    item.transition.transition_name}}</br>
                    {{item.gmt_created}}
                    </div>
                </div>
            </template>
        </el-step>
    </el-steps>
</template>
<script>
    import eventBus from "@/utils/eventBus";
    export default {
        name:"topStep",
        props:{
            row: {
              type: Object,
              default: function () {
                return {}
              }
            },
            direction:{
                type:String,
                default:"horizontal"
            }
        },
        data() {
            return {
                flowStepList: [],
                stepActive:0
            }
        },
        computed:{
          current_state_id(){
            return this.$store.getters.current_state_id
          },
        },
        created() {
            this.getFlowsteps()
            this.refreshData()
        },
        methods: {
            refreshData(){
                eventBus.$on("submitWork",()=>{
                    this.getFlowsteps()
                })
            },
            getFlowsteps() {
              this.$store.dispatch("workManagement/getFlowsteps",this.row).then(res => {
                this.flowStepList = res
                this.stepActive = this.getStepActive()
              })
            },
            getStepActive() {
              let currentIndex = 0
              this.flowStepList.forEach((item, index) => {
                if (this.current_state_id == item.state_id) {
                  currentIndex = index
                  return
                }
              })
              return currentIndex
            },
        }
    }
</script>
<style lang="scss" scoped>
    ::v-deep.el-steps--vertical{
        height: auto;
        max-height: 100%;
        overflow: auto;
    }
    ::v-deep.el-step{
        .el-step__title{
            font-size: 14px;
        }
        .el-step__description{
            padding: 0;
            color: #666666;
            line-height: 16px;
        }
        .el-step__head.is-success{
            .el-step__line{
                background-color:#13ce66;
            }
        }
        .el-step__main{
            margin-bottom: 10px;
        }
    }
    .step-item{
        margin-top: 10px;
        div{
            border-bottom: 1px solid #DCDFE6;
            display: inline-block;
        }
    }
    .step-item:first-child{
        margin-top: 0px;
    }
</style>
